<template>
  <div class="content">

    <el-form ref="form" :model="form" label-width="120px" :inline="true">

      <el-form-item label="请选择用户类型:">
        <el-radio-group v-model="form.userType" @change="changeType">
          <el-radio label="学生" ></el-radio>
          <el-radio label="老师"></el-radio>
        </el-radio-group>
      </el-form-item>

      <br/>

      <el-form-item>
        <el-input v-model="form.userName" size="mini" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input v-model="form.userNo" size="mini" placeholder="请输入学号/工号"></el-input>
      </el-form-item>

      <el-date-picker
        v-model="form.startTime"
        type="datetime"
        size="mini"
        :default-value="new Date()"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="margin-right: 10px;width: 180px;"
        placeholder="选择开始日期">
      </el-date-picker>

      <el-date-picker
        v-model="form.endTime"
        type="datetime"
        :default-value="new Date()"
        value-format="yyyy-MM-dd HH:mm:ss"
        size="mini"
        style="margin-right: 10px;width: 180px!important;"
        placeholder="选择结束日期">
      </el-date-picker>

      <el-button type="primary" size="mini" class="btn" @click="search"><i class="fa fa-search" style="margin-right:5px;"></i>查询</el-button>
      <el-button type="primary" size="mini" @click="excelExport"><i class="fa fa-arrow-down" style="margin-right:5px;"></i>导出</el-button>
    </el-form>

    <!-- <el-divider></el-divider> -->

    <template>
      <el-table
        :data="tableData"
        height="470"
        v-loading="loading"
        size="mini"
        style="width: 100%">
        <el-table-column
          prop="id"
          fixed
          label="充值ID"
          width="150">
        </el-table-column>
        <el-table-column
          prop="number"
          fixed
          label="订单编号">
        </el-table-column>
        <el-table-column
          prop="userName"
          width="150"
          label="姓名">
        </el-table-column>

        <el-table-column
          prop="paymentAmt"
          label="充值金额（元）">
        </el-table-column>

        <el-table-column
          prop="bankTransNo"
          label="银行流水号">
        </el-table-column>

        <el-table-column
          prop="userNo"
          label="学/工号">
        </el-table-column>

        <el-table-column
          prop="id"
          label="用户类型">
          <template slot-scope="scope">
            <span>{{scope.row.userType==1?'学生':'老师'}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="paymentAmt"
          label="充值金额（元）">
        </el-table-column>

        <el-table-column
          prop="channel"
          width="100"
          label="充值方式">
        </el-table-column>
        <el-table-column
          prop="finishTime"
          width="150"
          label="支付时间">
        </el-table-column>

        <el-table-column
          prop="id"
          width="100"
          label="充值状态">
          <template slot-scope="scope">
            <span v-show="scope.row.status==0">待支付</span>
            <span v-show="scope.row.status==1">已支付</span>
            <span v-show="scope.row.status==2">支付异常</span>
          </template>
        </el-table-column>

      </el-table>
    </template>
    <el-row>
      <el-col :span="24">
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 15, 20,50,100]"
              :page-size="everyPageNum"
              layout="total, sizes,prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
        <div class="grid-content bg-purple-dark" style="font-size:13px;float:right;margin:26px 0 0 10px">合计金额：<span style="color:rgb(20, 136, 154);font-weight:bold">{{sumData}}</span></div>
      </el-col>
    </el-row>
    <!--新增编辑弹框-->
    <el-dialog title="创建学生信息" :visible.sync="showEdit" width="40%" v-dialogDrag>
      <editStudent @hideEdit="hideEditStatus" ref="child" :msg="updateStatus"></editStudent>
    </el-dialog>
  </div>
</template>

<script>
    import Cookies from "js-cookie"
    import editStudent from "@/components/StudentManagement/edit";

    export default {
        name: "StudentManagement",
        components: {
            editStudent
        },
        data() {
            return {
                sumData: '',
                url:this.$Config.url,
                showEdit: false,//显示编辑弹框
                updateStatus:1,//默认是新增
                loading:false,
                total:1,//总页数
                everyPageNum:10,//每页多少条
                currentPage:1,//当前页
                form: {
                    userName:'',
                    startTime:'',
                    endTime:'',
                    userNo:'',
                    userType:'学生'
                },
                tableData: []
            }
        },
        mounted() {
            this.common();
        },
        methods: {
            excelExport() {
              const deptId = JSON.parse(localStorage.getItem("userInfo")).deptId;
              // if (JSON.parse(localStorage.getItem("userInfo")).deptId) {
                var divFrame = window.parent.document.getElementById(
                  "downLoadListFrame"
                );
                //判断是否存在，如果存在先移除，再重新创建
                if (divFrame != null) {
                  window.parent.document.body.removeChild(divFrame);
                }
                var iframe = window.parent.document.createElement("iframe");
                iframe.setAttribute("id", "downLoadListFrame");
                //download_file.id = "downFrame";
                window.parent.document.body.appendChild(iframe);
                divFrame = window.parent.document.getElementById("downLoadListFrame");
                //隐式调用，（注意：window.parent.document 适应对于，farme内部代码，调用frame 外部dom；如果项目未用frame，改写成 document即可）
                divFrame.src = `${this.url}/admin/rechargeorder/export?userType=${this.form.userType=='学生'?1:2}&userNo=${this.form.userNo}&userName=${this.form.userName}&startTime=${this.form.startTime}&endTime=${this.form.endTime}`;
                divFrame.style.display = "none";
              // } else {
              //   this.$message({
              //     message: "超级管理员无法下载模板",
              //     type: "warning"
              //   });
              // }
            },
            search(){
                this.common(this.currentPage,this.everyPageNum);
            },
            changeType(){
                let userType=this.form.userType=="学生"?1:2;
                this.common(this.currentPage,this.everyPageNum,userType);
            },
            handleSizeChange(val) {
                //   每页多少条
                this.everyPageNum=val;
                this.common(this.currentPage,val);
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.common(val,this.everyPageNum);
            },
            hideEditStatus(status){
                this.showEdit=false;
                this.common(this.currentPage,this.everyPageNum);
            },
            common(pageNo=1,pageSize=10,userType=1) {
                const that = this;
                that.loading=true;
                let data={
                    pageNo,
                    pageSize,
                    userType:(this.form.userType=='学生'?1:2),
                }
                let dataStatus={};
                if(that.form.userNo){dataStatus.userNo=that.form.userNo};
                if(that.form.userName){dataStatus.userName=that.form.userName};
                if(that.form.startTime){dataStatus.startTime=that.form.startTime};
                if(that.form.endTime){dataStatus.endTime=that.form.endTime};

                let requestData={...data,...dataStatus}
                this.$axios.get(that.url+'/admin/rechargeorder/page', {
                    params:requestData,
                    headers: {
                        "x-baie-admin-token": Cookies.get("token")
                    }
                })
                    .then(function (res) {
                        that.loading=false;
                        if(res.data.code==200){
                            that.tableData = res.data.data.records;
                            that.total=res.data.data.total;
                            that.sumData = res.data.sum;
                        }else{
                            that.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }

                    })
                    .catch(function (error) {
                        that.loading=false;
                        console.log(error);
                    });

            }
        }
    }
</script>

<style scoped lang="scss">
  .el-select,.el-input,.el-date-picker{
    width: 180px!important;
  }
  .el-range-editor--mini.el-input__inner{
    margin-top: 7px;
    margin-right: 10px;
    width: 300px;
  }
  .el-pagination{
    float: right;
    margin: 20px 10px;
  }
  .button_list {
    margin-bottom: 10px;
  }

  .content {
    text-align: left;
  }

  .el-divider {
    margin: 10px 0;
  }

  .btn {
    margin-top: 6px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
</style>
